<template>
  <div style="margin-bottom: 0px">
    <div style="width: 1170px; margin: 0 auto;overflow: hidden">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="color: #999;font-size: 16px">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <!--        <el-breadcrumb-item>我要租房</el-breadcrumb-item>-->
        <el-breadcrumb-item>{{ ruleForm.name }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="block" style="margin-top: 20px">
        <template>
          <div>
            <el-image
                style="width: 450px; height: 300px"
                :src="majorUrl"
                :fit="fit"></el-image>
          </div>
        </template>
      </div>
      <div class="details">
        <el-descriptions :title="ruleForm.name,orientation" style="width: 660px;font-size: 24px;font-weight: bolder"
                         column="1">
          <el-descriptions-item label="租金">{{ ruleForm.price }}元/月</el-descriptions-item>
          <el-descriptions-item label="面积">{{ ruleForm.area }}平米</el-descriptions-item>
          <el-descriptions-item label="户型">{{ ruleForm.houseType }}</el-descriptions-item>
          <el-descriptions-item label="楼层">{{ ruleForm.floor }}</el-descriptions-item>
          <el-descriptions-item label="朝向">{{ orientation.direction }}</el-descriptions-item>
          <el-descriptions-item label="电话咨询">{{ agent.phoneNumber }}</el-descriptions-item>
        </el-descriptions>

<!--        <el-button class="yykf" type="text" @click="dialogFormVisible = true">预约看房</el-button>-->
<!--        <el-dialog title="预约信息" :visible.sync="dialogFormVisible">-->
<!--          <el-form :model="sectionForm" :rules="rules">-->
<!--            <el-form-item label="预约人姓名" prop="name" :label-width="formLabelWidth">-->
<!--              <el-input v-model="sectionForm.name" autocomplete="off"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="预约人电话" prop="phone" :label-width="formLabelWidth">-->
<!--              <el-input v-model="sectionForm.phone" autocomplete="off"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-date-picker-->
<!--                v-model="sectionForm.date1"-->
<!--                align="right"-->
<!--                type="date"-->
<!--                placeholder="选择日期"-->
<!--                :picker-options="pickerOptions">-->
<!--            </el-date-picker>-->
<!--            <el-time-select-->
<!--                v-model="sectionForm.date2"-->
<!--                :picker-options="{-->
<!--                start: '08:30',-->
<!--                step: '02:00',-->
<!--                end: '18:30'-->
<!--                }"-->
<!--                placeholder="选择时间">-->
<!--            </el-time-select>-->
<!--          </el-form>-->
<!--          <div slot="footer" class="dialog-footer">-->
<!--            <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--            <el-button type="primary" @click="dialogFormVisible = false">预约</el-button>-->
<!--            <el-button type="primary" @click="submitReservationForm">预约</el-button>-->
<!--          </div>-->
<!--        </el-dialog>-->

        <el-button class="kfzx" @click="openConfirm">
          <i class="fa" :class="favorite ? 'fa-heart' : 'fa-heart-o'"></i>
          {{ (favorite ? '已收藏' : '收藏') + "：" + (ruleForm.collectionCount) }}
        </el-button>
      </div>
    </div>
    <div style="margin-top: 50px">
      <div style="border-top: 2px solid #3fcbc0;width: 1170px;margin: 0 auto">
        <template>
          <el-tabs type="card" v-model="activeName">
            <el-tab-pane label="房子详情" name="first" stretch="true">
              <img style="display: inline-block;width: 820px;" src="../../public/img_1.png">
              <div>
                <el-descriptions class="margin-top" title="房子基本情况" column="3" border>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-user"></i>
                      小区简介
                    </template>
                    {{ ruleForm.communityDescription }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-mobile-phone"></i>
                      出租时长
                    </template>
                    {{ ruleForm.leaseTime }}个月
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-location-outline"></i>
                      地址
                    </template>
                    {{ section.name }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-tickets"></i>
                      租赁方式
                    </template>
                    {{ leaseType }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-office-building"></i>
                      经纪人
                    </template>
                    {{ agent.name }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-office-building"></i>
                      经纪人联系方式
                    </template>
                    {{ agent.phoneNumber }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <div>
                <el-divider content-position="left" style="font-size: 16px;font-weight: bolder;margin-top: 20px">房间环境
                </el-divider>
                <el-row gutter="20">
                  <el-col style="margin: 10px 0" span="8" v-for="item in images">
                    <el-card>
                      <img :src="item" width="100%" height="233px">
                    </el-card>
                  </el-col>
                </el-row>
              </div>
              <el-divider content-position="left" style="font-size: 16px;font-weight: bolder;margin-top: 20px">为什么选择千寻
              </el-divider>
              <div style="margin-top: 20px">
                <img src="../../public/img_2.png" alt="">
              </div>
              <el-divider content-position="left" style="font-size: 16px;font-weight: bolder;margin-top: 20px">怎么租房呐
              </el-divider>
              <div style="margin-top: 20px">
                <img src="../../public/img_3.png" alt="">
              </div>

            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rules: {
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'},
          {min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {pattern: /^1[3456789]\d{9}$/, message: '长度在 11 个字符', trigger: 'blur'}
        ]
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      sectionForm: {
        name: [],
        phone: '',
        date1: '',
        date2: '',
      },
      dialogFormVisible: false,
      formLabelWidth: '120px',

      ruleForm: {
        id: '',
        name: '',
        price: '',
        area: '',
        communityDescription: '',
        floor: '',
        hasElevator: '',
        maxFloor: '',
        recom: '',
        sectionId: '',
        orientationId: '',
        agentId: '',
        houseCategoryId: '1',
        leaseTime: '',
        leaseTypeId: '',
        houseType: '',
        majorImage: '',
        houseImage: '',
        collectionCount: ''
      },
      orientation: {
        id: '',
        direction: ''
      },
      agent: {
        id: '',
        name: '',
        gender: '',
        age: '',
        idCard: '',
        phoneNumber: '',
        address: '',
        entryTime: '',
      },
      section: {
        id: '',
        name: '',
        parentId: '',
        depth: '',
        isParent: '',
        isDisplay: '',
      },
      leaseType: '',
      images: [
        '/房1.jpg',
        '/房2.jpg',
        '/房3.jpg',
        '/房4.jpg',
        '/房5.jpg',
        '/房6.jpg',
        '/房7.jpg',
        '/房8.jpg',
        '/房9.jpg',
      ],
      activeName: 'first',
      majorUrl: '/房1.jpg',
      fit: 'fill',
      favorite: 'false'
    }
  },
  methods: {

    // 提交预约表单
    // submitReservationForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       let url = 'http://localhost:9200/UHA/add-new';
    //       console.log('url = ' + url);
    //
    //       let formData = this.qs.stringify(this.sectionForm);
    //       console.log('formData = ' + formData);
    //
    //
    //       this.axios.post(url, formData).then((response) => {
    //         let jsonResult = response.data;
    //         console.log(jsonResult);
    //         if (jsonResult.state == 20000) {
    //           this.$message({
    //             showClose: true,
    //             message: '添加预约成功！',
    //             type: 'success'
    //           });
    //           this.resetForm(formName);
    //         } else {
    //           this.$message({
    //             showClose: true,
    //             message: jsonResult.message,
    //             type: 'error'
    //           });
    //         }
    //       });
    //     } else {
    //       console.log('error submit!!');
    //       return false;
    //     }
    //   });
    // },

    openConfirm() {

      let loginInfo = localStorage.getItem('localUserJwt');

      if (!loginInfo) {
        this.$alert("请先登录！", '错误', {
          confirmButtonText: '确定',
          callback: action => {
            this.$router.push('/login')
          }
        });
        return;
      }


      this.$confirm('此操作将' + (this.favorite ? '取消收藏' : '收藏') + '房源，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.toggleFavorite();
      }).catch(() => {
      });
    },
    toggleFavorite() {
      if (this.favorite == false) {
        console.log('false')
        let url = 'http://localhost:9200/user/add-new-house-collection?houseId=' + this.ruleForm.id;
        this.axios.post(url).then((response) => {
          let jsonResult = response.data;

          if (jsonResult.state == 20000) {
            this.$message({
              message: '收藏成功！',
              type: 'success'
            });
            // this.loadUserCollectionInfo();
            this.loadLeaseHouseStandard();
            this.favorite = true;
          } else {
            this.$alert(jsonResult.message, '错误', {
              confirmButtonText: '确定',
              callback: action => {
                // this.loadUserCollectionInfo();
                this.loadLeaseHouseStandard();

                this.favorite = false;
              }
            });
          }
        });
      }
      if (this.favorite == true) {
        console.log('true')
        let url = 'http://localhost:9200/user/delete-house-collection?houseId=' + this.ruleForm.id;
        this.axios.post(url).then((response) => {
          let jsonResult = response.data;

          if (jsonResult.state == 20000) {
            this.$message({
              message: '取消收藏成功！',
              type: 'success'
            });
            // this.loadUserCollectionInfo();
            this.loadLeaseHouseStandard();
            this.favorite = false;
          } else {
            this.$alert(jsonResult.message, '错误', {
              confirmButtonText: '确定',
              callback: action => {
                // this.loadUserCollectionInfo();
                this.loadLeaseHouseStandard();
                this.favorite = true;
              }
            });
          }
        });
      }
    },
    loadSectionStandard() {
      let url = 'http://localhost:9200/section/standard?id=' + this.ruleForm.sectionId;
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.section = jsonResult.data;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadLeaseHouseStandard();
            }
          });
        }
      });
    },
    loadAgentStandard() {
      let url = 'http://localhost:9200/agent/standard?id=' + this.ruleForm.agentId;
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.agent = jsonResult.data;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadLeaseHouseStandard();
            }
          });
        }
      });
    },
    loadOrientationStandard() {
      let url = 'http://localhost:9200/orientation/standard?id=' + this.ruleForm.orientationId;
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult.data);
        if (jsonResult.state == 20000) {
          this.orientation = jsonResult.data;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      })
    },
    loadLeaseHouseStandard() {
      this.ruleForm.id = this.$router.currentRoute.query.houseId;
      let url = 'http://localhost:9200/house/standard/lease-house?id=' + this.ruleForm.id;
      // + this.ruleForm.id;
      console.log(url);
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;

        if (jsonResult.state == 20000) {
          this.ruleForm = jsonResult.data;
          this.majorUrl = this.ruleForm.majorImage;
          this.loadOrientationStandard();
          this.loadAgentStandard();
          this.loadSectionStandard();
          // this.images = this.ruleForm.houseImage.split(",");
          console.log(this.images);
          if (this.ruleForm.leaseTypeId === 1) {
            this.leaseType = '整租';
          } else {
            this.leaseType = '合租';
          }
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    loadUserCollectionInfo() {

      let loginInfo = localStorage.getItem('localUserJwt');

      if (!loginInfo) {
        this.favorite = false;
        return;
      }


        this.ruleForm.id = this.$router.currentRoute.query.houseId;
      let url = 'http://localhost:9200/user/houseCollectionInfo?houseId=' + this.ruleForm.id;

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;

        if (jsonResult.state == 20000) {
          this.favorite = jsonResult.data;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    }
  },
  mounted() {
    this.loadLeaseHouseStandard();
    this.loadUserCollectionInfo();
  }
}
</script>

<style>
.block {
  float: left;
}

.details {
  float: right;
}

.el-carousel-item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.kfzx {
  border: 1px solid #ddd;
  background-color: white;
  color: black;
  float: left;
  width: 160px;
  height: 55px;
  font-size: 16px;
}

.kfzx:hover {
  background-color: #3fcbc0;
  color: white;
}

.yykf {
  border: 1px solid #ddd;
  background-color: #52dad0;
  color: white;
  float: left;
  width: 330px;
  height: 55px;
  font-size: 16px;
}

.yykf:hover {
  background-color: #3dd6ca;
  color: white;
}

.el-button:active {
  color: black !important;
  border-color: #3a8ee6;
  outline: 0;
}

.el-button:focus, .el-button:hover {
  color: black !important;
  border-color: #ddd !important;
  background-color: white !important;
}

</style>